<template>
	
	<div >
		
		<scroller lock-x   @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="0" style="padding-bottom: 0;">
			
			<div>
		
				<div class="free_column" @click="toDetail(index)" v-for="(item,index) in newList">
					
					<div class="column_img">
						<img :src="item.cover_pic"/>
					</div>
					<div class="column_bottom" style="padding-bottom: 0.5rem;">
						<flexbox >
					      <flexbox-item :span="8"><div class="flex-demo">
					      	<flexbox>
						      <flexbox-item :span="9"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
						      	<flexbox>
							      <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="info.image"/></div></flexbox-item>
							      <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 13.5rem;overflow: hidden;height: 1.5rem;">{{info.name}}</div></div></flexbox-item>
							    </flexbox>
						      </div></flexbox-item>
						      <flexbox-item><div class="flex-demo" style="text-align: right;color: #6C6A6B;font-size: 0.9rem;"></div></flexbox-item>
						    </flexbox>
					      </div></flexbox-item>
					      <flexbox-item>
					      	<div v-if="item.is_free == 1" class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">免费</div>
					      	<div v-else class="flex-demo" style="color:#6C6A6B ;font-size: 0.9rem;">第{{item.stage}}节</div>
					      </flexbox-item>
					   </flexbox>
					    <div style="width: 67%;padding-left: 0.5rem;">{{item.title}}</div>
					    <div style="padding-left: 10px;margin-top: 10px;color: #C7C7C7;font-size: 0.9rem;">
					    	<span>{{item.showtime}}更新</span>
					        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
					    </div>
					    
					</div>
				</div>
		        
		        <load-more tip="loading" v-if="loading"></load-more>
				
			</div>
			
		</scroller>
		
		<!--悬浮弹窗-->
		<div style="width:100%;position: fixed;bottom: 0;z-index: 999999;font-size: 1.3rem;line-height: 3rem;">
			<flexbox>
		      <flexbox-item><div  @click="toIntroduce" class="flex-demo" style="background:#8D087B;color: #FFFFFF;">专栏介绍</div></flexbox-item>
		      <flexbox-item style="margin-left: 0;">
		      	<div @click="offLine" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;" v-if="info.is_buy == false">￥{{info.price}}元/年</div>
		      	<div class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;" v-else>已购买</div>
		      </flexbox-item>
		   </flexbox>
		</div>
		
		
		
		
		<!--付费弹窗-->
		<div class="attr-picker" v-show="judge == true" @click="signOut">
			<div class="content-box">
				<div style="padding: 0.5rem;line-height: 2rem;">
					<div>课程：{{lesson_info.name}}</div>
				    <div>时间：1年</div>
				    <div>价格：￥{{lesson_info.price}}</div>
				</div>
				<div>
				    <div @click.stop="clear">
				    	<group>
					      <x-switch @on-change="changeMoney(value)"  style="color: #8F3DC5;background: #F7F7F7;"  :title="onLineChange"  v-model="value"></x-switch>
					    </group>
				    </div>
				    
			   </div>
			   
			   <div style="line-height: 3rem;border-bottom: solid 1px #CBCBCB;">
			   	<flexbox>
					<flexbox-item><div class="flex-demo" style="background: #FFFFFF;color: red;">
						合计:￥{{onLineMoney}}
					</div></flexbox-item>
				    <flexbox-item style="margin-left: 0;"><div @click.stop="settlement" class="flex-demo" style="background: #8F3DC5;color: #FFFFFF;">
				    	结算
				    </div></flexbox-item>
				</flexbox>
			   </div>
					    
			</div>
			
		</div>




		
		<div @click="toHome" style="z-index: 9999999;position: fixed;bottom:3rem;left: 0.5rem;">
					
			<img src="../../static/image/shouye.png" style="width: 3rem;"/>
			
		</div>
		
		
	</div>
	
	
	
	
	
	
</template>

<script>
	import {base64,  XSwitch, Group ,DatetimeView,PopupPicker,XButton,Scroller,LoadMore} from 'vux'
	import wx from 'weixin-js-sdk'
	
	export default {
		components: {
		    
		    XSwitch,Group,PopupPicker,XButton,DatetimeView,Scroller,LoadMore,base64
		},
		  
		  
		data(){
			return{
				onLineMoney:'',
				onLineTotal:'',
				onLineChange:'可用0学分抵用0元',
				lesson_info:'',
				info:'',
				list:'',
				lesson_id:'',
				judge:false,
				value:false,
				access_token:'',
				
				onFetching: false,
		        loading:false,
		        newList:[],
		        page:1,
		        
		        totalintegral:0,
		        integral:''
		        
			}
		},
		
		methods:{
			
			//返回首页
			toHome(){
				
				this.$router.push({ path: '/'});
				
			},
			
			
			//退出支付页面
		    signOut(){
		    	this.judge = false
		    },
		    
		    
		    //开关选择清除冒泡
		    clear(){
		    	
		    },
		    
		    //获取详情
		    getDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/lesson-info&lesson_id=' + this.lesson_id + '&page=' + this.page+'&access_token=' + this.access_token)
		    	.then((response) => {
		    	
				if(response.body.code == 0) {
					
					this.list = response.body.data.list
					this.info = response.body.data.info

					console.log('classlist:'+this.info)
					
					for(var i = 0 ; i < response.body.data.list.length ; i ++){
						
						this.newList.push(this.list[i])
						
					}

					this.$root.getShareDetail('在家就可以学习老师上万元的线下课程',this.info.name,'https://zhouzi.fxm365.com/addons/zjhj_mall/core/web/temp/20180815160427.jpg');
					
				} else {
					
				}
					
					
				this.$store.commit('updateLoadingStatus',false);	
					
				}, (response) => {
	                 
	                 
				});
		    },
		    
		    //触底加载
		    onScrollBottom:function(){
		      
		      if (this.onFetching) {
		        // do nothing
		      } else {
		        
		        
		        
		        console.log('开始')
		        
		        this.page = this.page + 1;
		        
		        console.log(this.page)
		        
		        this.getDetail();
		        
		        this.loading = true;
		        
		        
		        
		      this.onFetching = false
		        setTimeout(() => {
		
		
		        this.onFetching = false
		          console.log('结束')
		          this.loading = false;
		        }, 500)
		        
		      }
		    },
		    
		    //点击弹出付费页面
		    offLine(){
		    	this.judge = true
		    	
		    	this.$http.get(this.$store.state.api + 'lesson-order/submit-preview&access_token=' + this.access_token + '&id=' + this.lesson_id)
			    	.then((response) => {
			    		
			    		console.log(response)
					
					if(response.body.code == 0) {
						
						
						this.lesson_info = response.body.data.lesson_info,
						this.onLineUser = response.body.data.user,
						this.onLineChange = '可用' + response.body.data.user.integral + '学分抵用' + response.body.data.user.integral2money +'元'
						this.onLineTotal = response.body.data.lesson_info.price,
						this.onLineMoney = response.body.data.lesson_info.price,
						this.intergral = response.body.data.user.integral
//						
					} else {
						
					}
				}, (response) => {
	                 
	                 
				});
		    	
		    	
		    },
		    
		    //开关选择
		    changeMoney(value){
		    	
		    	if( value == true ){
		    		this.totalintegral = this.intergral
		    		this.onLineMoney =  this.onLineTotal - this.onLineUser.integral2money
		    	}else{
		    		this.totalintegral = 0
		    		this.onLineMoney = this.onLineTotal
		    	}
		    	
		    },
		    
		    //结算
		    settlement(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'web-wechat-order/lesson-submit',
		    	{
		    		access_token:this.access_token,
		    		id:this.lesson_id,
		    		num:1,
		    		use_integral:this.totalintegral,
		    	})
		    	.then((response) => {
		    		
		    		console.log(response)
		    		this.message = response.body.msg
				
				if(response.body.code == 0) {
					
					
					
					if(response.body.data.msg == '订单支付成功'){
						
						this.showPositionValue = true
						
					}else{
						
						WeixinJSBridge.invoke(
					        'getBrandWCPayRequest', {
					            'appId':response.body.res.appId,     //公众号名称，由商户传入     
					            'timeStamp':response.body.res.timeStamp,         //时间戳，自1970年以来的秒数     
					            'nonceStr':response.body.res.nonceStr, //随机串     
					            'package':response.body.res.package,     
					            'signType':response.body.res.signType,         //微信签名方式：     
					            'paySign':response.body.res.paySign //微信签名 
					        },
					        function(res){
					       	    console.log(res)
					            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
					        }
				        );
						
					}
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
				
				
		    },
		    
		    
		    //跳转到详情
			toDetail(index){
				
				
				var lesson_id = this.newList[index].lesson_id
				var section_id = this.newList[index].id

				if(this.info.is_buy == false && this.newList[index].is_free == '0'){
					this.offLine();
				}else{
				    this.$router.push({ path: '/classDetail',name:'classDetail',params:{lesson_id:lesson_id,section_id:section_id}});

				}
				
				
			},
		    
		    
		    //跳转到专栏介绍
		    toIntroduce(){
		    	
		    	console.log(this.info.id)
		    	
		    	this.$router.push({ path: '/classIntroduce',name:'classIntroduce',params:{lesson_id:this.info.id}});
		    	
		    },
		    
		    //获取地址栏信息
		getUrlStr(name){
	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },
		},
		
		mounted(){
			
			var lesson_id = this.$route.params.lesson_id
			
			if(lesson_id != undefined){
				
				localStorage.setItem("lesson_id",lesson_id);
				
			}
			
			var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           console.log(parentId.toString().indexOf('?'));
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           
//         var uid = this.getUrlStr('uid');

           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);
//		   locurl = locurl.replace(/\//g, "@@");
           
           console.log('-1-'+access_token)
           console.log('-2-'+parentId)
           console.log('-4-'+uid)
          
          
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
           console.log('-3-'+localStorage.getItem('access_token'));
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();

              
            }else{
            	
            	console.log(222);
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
       
         
    	   this.access_token = localStorage.getItem('access_token');
    	   this.lesson_id = localStorage.getItem('lesson_id');
			
		   this.getDetail()
			
		}
		
		
	}
	
	
	
	
	
	
</script>

<style>
	
	
	
	.column_top{
		border-bottom: solid 1px #e3e3e3;
    	/*padding-left: 10px;*/
    	padding: 5px 10px;
	}
	.free_column{
		background: #FFFFFF;
	}
	
	
</style>